<template>

  <div class="userimgbox">
    <a href="" class="updateimg">
      <img src="http://baota.111zh.cn/Public/Front/xinmeng1/images/mrtx.png" alt="头像">
    </a>
    <div class="userinfobox" style="padding: 10px 0px;width: 130px;min-width: 130px;">
      <p>
        <a  style="float:left;">我的编号：{{ user.localUserID }}</a>
      </p>
      <p>
        <a  style="float:left;">我的等级： {{ user.userLevel ? user.userLevel.levelName : '' }}</a>
        <a     v-if="updateEnable"
               @click="$parent.$refs.self.show()"
               class="el-icon-upload"></a>
      </p>
      <p>
        <a  style="float:left;">我的余额：{{ (user.userMoney ? user.userMoney.money : 0) | n3 }}</a>
      </p>
    </div>
    <div class="usercenter-money-body">
      <a class="layui-btn layui-btn-sm" href="/charge">我要充值</a>
      <a class="layui-btn layui-btn-primary layui-btn-sm"
         href="/withdraw">我要提现</a>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      user: (state) => state.user,
      updateEnable: (state) => state.updateEnable
    })
  }
}
</script>

<style lang="scss" scoped>
@import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style3/common.css';
@import 'assets/style/style3/openlogin.css';
@import 'assets/style/style3/style.css';
@import 'assets/style/style3/font_1451715_0505c2bxv7b7.css';


.top-btns {
  background: white;
  padding-bottom: 5px;
  a {
    color: white;
    text-align: center;
    line-height: 45px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    width: 50%;
    float: left;
    &:first-child {
      background-color: $--deep-color-primary;
    }
    &:last-child {
      background-color: $--color-primary;
    }
    &:hover {
      background-color: $--main-top-border;
    }
  }
}
.left-nav {
  padding: 10px 0 10px 15px;
  background: $--color-primary;
  color: white;
  li {
    padding: 5px 0;
    font-size: 12px;
    font-weight: 500;
    i {
      font-size: 14px;
      margin-left: 5px;
      cursor: pointer;
      &:hover {
        color: $--basic-orange;
      }
    }
  }
}
</style>
